import React, { useContext } from 'react';
import { MyContext, ActionType } from '../MyContext';

const delay = (ms: number) => new Promise((res) => setTimeout(res, ms));

export default function ChildCount() {
    const { state, dispatch } = useContext(MyContext);
    console.log('re-render ChildCount', state?.count);

    return (
        <main className='container p-4 border'>
            <div className='p-4'>count is: {state?.count}</div>
            <button
                className='p-2 border'
                type='button'
                onClick={async () => {
                    dispatch({ type: ActionType.SET_LOADING, loading: true });
                    await delay(1000);
                    dispatch({ type: ActionType.ADD_COUNT });
                    dispatch({ type: ActionType.SET_LOADING, loading: false });
                }}
            >
                AddCountAsync
            </button>
        </main>
    );
}
